<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#parent{
				width: 1000px;
				margin: 0 auto;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-gap: 15px;
				grid-template-rows: auto auto;
				position: relative;
			}
			.box{
				width: 300px;
				height: 300px;
				border: 1px solid rebeccapurple;
				position: relative;
			}
			
			.box1-1{
				width: 300px;
				height: 150px;
				border: 1px solid yellowgreen;
				text-align: center;
				/* position: relative;
				top: 0px;
				left: 0px; */
			}
			.boxspan{
				
				width: 80px;
				height: 25px;
			}
			img{
				width: 300px;
				height: 150px;
			}
			.span2{
				background-color: aqua;
				position: absolute;
				border-radius: 18px;
				top: 0px;
				left: 0px;
				text-align: center;
				/* text-align: center; */
			}
			.span3{
				position: absolute;
				color: red;
				bottom: 5px;
				left: 10px;
			}
			.span4{
				position: absolute;
				bottom: 5px;
				right: 10px;
			}
			.box:hover{
				transition: scale(1.1);
				box-shadow: 0 0 20px rgba(0,0,0,0.3);
			}
			img:hover{
				transform: scale(1.1);
				box-shadow: 0 0 20px rgba(0,0,0,0.3);
			}
		</style>
	</head>
	<body>
		<div id="parent">
			<div class="box">
				<div class="box1-1">
					<img src="img/大理1.jpg" alt="">
				</div>
				<p>【热销纯玩】云南昆明-大理-丽江-香格里拉纯玩8日游</p>
				<span class="boxspan span2">跟团游</span>
				<span class="boxspan span3">￥1698起</span>
				<span class="boxspan span4">大理 丽江</span>
				
			</div>
			<div class="box">
				<div class="box1-1">
					<img src="img/大理2.jpg" alt="">
				</div>
				<p>【热销纯玩】云南昆明-大理-丽江-香格里拉纯玩8日游</p>
				<span class="boxspan span2">跟团游</span>
				<span class="boxspan span3">￥1698起</span>
				<span class="boxspan span4">大理 丽江</span>
			</div>
			<div class="box">
				<div class="box1-1">
					<img src="img/大理3.jpg" alt="">
				</div>
				<p>【热销纯玩】云南昆明-大理-丽江-香格里拉纯玩8日游</p>
				<span class="boxspan span2">跟团游</span>
				<span class="boxspan span3">￥1698起</span>
				<span class="boxspan span4">大理 丽江</span>
			</div>
			<div class="box">
				<div class="box1-1">
				<img src="img/大理4.jpg" alt="">
				</div>
				<p>【热销纯玩】云南昆明-大理-丽江-香格里拉纯玩8日游</p>
				<span class="boxspan span2">跟团游</span>
				<span class="boxspan span3">￥1698起</span>
				<span class="boxspan span4">大理 丽江</span>
			</div>
			<div class="box">
				<div class="box1-1">
					<img src="img/西双版纳1.jpg" alt="">
				</div>
				<p>【热销纯玩】云南昆明-大理-丽江-香格里拉纯玩8日游</p>
				<span class="boxspan span2">跟团游</span>
				<span class="boxspan span3">￥1698起</span>
				<span class="boxspan span4">大理 丽江</span>
			</div>
			<div class="box">
				<div class="box1-1">
					<img src="img/西双版纳2.jpg" alt="">
				</div>
				<p>【热销纯玩】云南昆明-大理-丽江-香格里拉纯玩8日游</p>
				<span class="boxspan span2">跟团游</span>
				<span class="boxspan span3">￥1698起</span>
				<span class="boxspan span4">大理 丽江</span>
			</div>
		</div>
	</body>
</html>